<script setup lang="ts">
// 从 Vue 中导入 ref 函数，用于创建响应式数据
import { ref } from "vue";
// 导入图片资源，用于在模板中显示
import imgUrl from '@/assets/projector.png';
import light from '@/assets/projector-light.png';

// 创建一个响应式布尔值，用于控制动画是否显示，默认为 false
const showAnimate = ref(false);
// 控制按钮是否可交互
const buttonInteractive = ref(false);

// 定义播放动画的函数，无参数
function playAnimate() {
  // 使用 requestAnimationFrame 确保在下一帧执行，避免点击延迟
  // 回调函数将 showAnimate 的值设置为 true，触发动画
  requestAnimationFrame(() => {
    showAnimate.value = true;
    // 设置定时器，在文本完全显示后使按钮可交互（1.7秒后）
    setTimeout(() => {
      buttonInteractive.value = true;
    }, 1300);
  });
}
</script>

<template>
  <!-- 主容器，添加点击事件监听器，点击时触发 playAnimate 函数 -->
  <div class="home-container" @click="playAnimate">
    <img :src="light" alt="logo" class="light-image" />
    <!-- 遮罩层，根据 showAnimate 的值动态添加 reveal 类 -->
    <div class="mask" :class="{ reveal: showAnimate }"></div>
    <!-- 图片元素，使用导入的 imgUrl 作为图片源 -->
    <img :src="imgUrl" alt="logo" class="positioned-image" />
    <!-- 文本容器 -->
    <div class="text-container" :class="{ reveal: showAnimate }">
      <!-- 换行符 -->
      <br />
      <!-- 标题元素 -->
      <h1 class="title">电影市场分析系统</h1>
      <!-- 描述段落 -->
      <p class="description">
        A simple, easy-to-use app designed to help users quickly analyze<br /> trends and data in the film market.
      </p>
      <!-- 换行符 -->
      <br />
      <!-- 按钮容器 -->
      <div class="button" :class="{ interactive: buttonInteractive }">
        <router-link to="/Movies" class="btn-link">进 入 系 统</router-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 主容器样式 */
.home-container {
  min-height: 100vh;    /* 最小高度为视窗高度的 100% */
  min-width: 100vw;
  position: relative;   /* 相对定位 */
  background-color: #181818;  /* 设置背景颜色为 #181818 */
  user-select: none; /* 禁止主容器文本选择 */
}

/* 固定定位的图片样式 */
.positioned-image {
  position: fixed;              /* 固定定位 */
  right: 3vw;
  left: -68.29vw;
  top: -79.8vh;
  width: 164vw;
  height: auto;                 /* 高度自适应，保持图片比例 */
  opacity: 1;                   /* 设置透明度，避免图片过于突兀 */
}

.light-image{
  position: fixed;
  right: 3vw;
  left: -68.29vw;
  top: -79.8vh;
  width: 164vw;
  height: auto;                 /* 高度自适应，保持图片比例 */
  opacity: 1;
}

/* 遮罩层样式 */
.mask {
  position: fixed;                /* 固定定位 */
  right: 31vw;                    /* 距离右边 32% */
  top: 50vh;                      /* 距离顶部 50% */
  transform: translateY(-50%) translateX(00%); /* 先盖在梯形上 */
  width: 100vw;                   /* 宽度为 68% */
  height: 100vh;                  /* 高度为 100% */
  background: rgb(24, 24, 24);    /* 背景色为白色 */
  transition: transform 1.5s cubic-bezier(.4, 0, .2, 1);  /* 变换过渡效果 */
}

/* 遮罩层显示状态样式 */
.mask.reveal {
  transform: translateY(-50%) translateX(-100%);  /* 整体向右移动一个自身宽度，彻底跑出屏幕 */
}

/* 文本容器样式 */
.text-container {
  position: fixed;              /* 固定定位 */
  left: 0;                      /* 距离左边 0 */
  top: 0;                       /* 距离顶部 0 */
  width: 100vw;                 /* 宽度为视窗宽度的 100% */
  height: 100vh;                /* 高度为视窗高度的 100% */
  display: flex;                /* 使用弹性布局 */
  flex-direction: column;       /* 主轴方向为垂直方向 */
  justify-content: center;      /* 主轴居中对齐 */
  align-items: center;          /* 交叉轴居中对齐 */
  transform: translate(-17vw, -6vh); /* 变换：向左移动 6vw，向上移动 6vh */
  padding: 2rem 3rem;           /* 内边距：上下 2rem，左右 3rem */
  opacity: 0;                   /* 透明度为 0，初始不可见 */
  transition: opacity 0.7s 1s;  /* 过渡效果：透明度变化，持续时间 0.7 秒，延迟 1.7 秒 */
  user-select: none;            /* 默认状态下禁止文本选择 */
  pointer-events: none;         /* 默认状态下禁用鼠标事件 */
}

.text-container.reveal {
  opacity: 1;                   /* 透明度为 1，完全可见 */
  user-select: auto;            /* 显示时允许文本选择 */
  pointer-events: auto;         /* 显示时启用鼠标事件 */
}

/* 标题样式 */
.title {
  font-size: 4rem;      /* 字体大小为 4 倍根元素字体大小 */
  font-weight: 900;     /* 字体粗细为 900 (最粗) */
  color: hsl(214, 58%, 61%);  /* 颜色值为 HSL 格式：色相214，饱和度58%，亮度61% */
}

/* 描述文本样式 */
.description {
  font-size: 1.5rem;     /* 字体大小为 1.5 倍根元素字体大小 */
  font-weight: 400;      /* 字体粗细为 400 (正常) */
  margin-top: 1rem;      /* 上边距为 1rem */
  color: #938f9e;        /* 文字颜色为 #938f9e */
}

/* 按钮样式 */
.button {
  background-color: hsl(214, 58%, 61%); /* 背景色为 HSL 格式：色相214，饱和度58%，亮度61% */
  border: none;                         /* 无边框 */
  padding: 1vh 1.8vw;                   /* 内边距：上下10px，左右20px */
  border-radius: 5px;                   /* 边框圆角为 5px */
  color: hsl(0, 0%, 100%);              /* 文字颜色为白色 */
  transition: all 0.4s;                 /* 过渡动画持续时间为 0.4 秒 */
  font-size: 1.5rem;                    /* 字体大小为 1.2 倍根元素字体大小 */
  text-align: center;                   /* 文本居中对齐 */
  display: inline-block;                /* 行内块级元素 */
  margin-top: 2vh;                      /* 上边距为 20px */
  width: 100%;                          /* 宽度为父元素的 100% */
  max-width: 15vw;                      /* 最大宽度为 300px */
  text-transform: uppercase;            /* 文转换为大写 */
  box-shadow: 0.4vh 0.5vw 2vh rgba(0, 0, 0, 0.38);  /* 添加阴影效果 */
  pointer-events: none;                 /* 初始状态下禁用鼠标事件 */
  cursor: default;                      /* 初始状态下不显示手型光标 */
}

/* 按钮可交互状态样式 */
.button.interactive {
  pointer-events: auto;                 /* 启用鼠标事件 */
  cursor: pointer;                      /* 显示手型光标 */
}

/* 按钮悬停状态样式 */
.button.interactive:hover {
  background-color: hsl(212, 61%, 72%); /* 悬停时背景色变为 HSL 格式：色相212，饱和度61%，亮度72% */
}

/* 按钮内链接样式 */
.btn-link {
  display: block;
  text-decoration: none;
  color: inherit;       /* 继承按钮文字颜色 */
  background: rgba(255,189,126,0);
  font-weight: 600;                    /* 字体粗细为 600 */
  user-select: none; /* 禁止按钮内链接文本选择 */
}
</style>


